.services-loading {
  height: 100%;

  .ant-spin-container {
    height: 100%;
  }
}

.services-wrapper {
  height: 100%;
  width: 100%;
  overflow: hidden;

  .apps-main-wrapper {
    height: 100%;
    display: flex;
    flex-direction: row;
    overflow: auto;
    padding: 18px 0;

    .main-left {
      display: flex;
      flex-direction: column;
      padding: 0 18px;

      .header {
        height: 50px;
        line-height: 50px;
      }

      .app-list {
        flex: 1;
        padding: 0;
        margin: 0;
        overflow: auto;
        list-style: none;

        .no-result {
          height: 100%;
          display: flex;
          justify-content: center;
          align-items: center;
          flex-direction: column;
        }

        .item {
          height: 40px;
          color: #fff;
          padding: 0 18px;
          display: flex;
          flex-direction: row;
          justify-content: space-between;
          align-items: center;

          .button {
            height: 100%;
            width: 100%;
            background: none;
            border: none;
            outline: none;
            text-align: left;
            display: flex;
            flex-direction: row;
            align-items: center;
            color: #fff;
            cursor: pointer;

            .icon {
              height: 30px;
              width: 30px;
            }

            span {
              text-indent: 10px;
              overflow: hidden; //超出的文本隐藏
              text-overflow: ellipsis; //溢出用省略号显示
              white-space: nowrap; //溢出不换行
            }
          }

          &.active {
            background: rgba(0, 0, 0, 0.3);
            border-radius: 10px;
          }
        }
      }
    }

    .main-right_form_container {
      flex: 1;
      overflow: hidden;

      .main-right_form_title {
        color: #fff;
        font-size: 25px;
        margin-bottom: 30px;
      }

      .main-right_form_wrapper {
        .custom-inner {
          color: #fff;
          white-space: nowrap;
          overflow: hidden;
        }
      }

      .app-description {
        .app-description-section {
          .app-description-section_title {
            font-size: 20px;
            color: #fff;
            font-weight: 200;
          }

          .app-description-section_item {
            .app-description-section_item__title {
              display: inline-block;
              width: 100px;
            }

            .app-description-section_item__content {
            }
          }
        }
      }
    }
  }
}

.left-enter {
  // test
  position: absolute;
  left: calc(225px - 100%);
  opacity: 0;
}

.left-enter-active {
  position: absolute;
  opacity: 1;
  left: 0;
  transition: left 0.3s, opacity 0.3s ease-in-out;
}

.left-exit {
  position: absolute;
  left: 0;
  opacity: 1;
}

.left-exit-active {
  position: absolute;
  opacity: 0;
  left: calc(225px - 100%);
  transition: left 0.3s, opacity 0.3s ease-in-out;
}

.right-enter {
  position: absolute;
  left: calc(100% - 225px);
  opacity: 0;
}

.right-enter-active {
  position: absolute;
  opacity: 1;
  left: 0;
  transition: left 0.3s, opacity 0.3s ease-in-out;
}

.right-exit {
  position: absolute;
  left: 0;
  opacity: 1;
}

.right-exit-active {
  position: absolute;
  opacity: 0;
  left: calc(100% - 225px);
  transition: left 0.3s, opacity 0.3s ease-in-out;
}
